<!--
 * @LastEditTime: 2023-10-30 13:30:49
 * @FilePath: \bdcar-net\src\views\index.vue
-->
<template>
  <div class="app-container home">
    <ul class="top-dom">
      <!-- 行驶里程排行榜 -->
      <li v-loading="loading.xslc">
        <div class="dom-title">
          <img src="@/assets/img/index/xslcph.png" />
          发电量行榜
          <span style="font-size: 14px;color:#2D4B7380;margin-left: auto;">发电累计:&nbsp{{ xslcphb.totalMileage }}kw</span>
        </div>
        <div class="dom-body">
          <div class="champion-dom">
            <div class="second-champion">
              <span>
                {{ xslcphb.list[1]?.kilometre }} <span>kw
                </span>
              </span>
              <span>{{ xslcphb.list[1]?.numberPlate }}</span>
            </div>
            <div class="first-champion">
              <span>
                {{ xslcphb.list[0]?.kilometre }} <span>kw</span>
              </span>
              <span>{{ xslcphb.list[0]?.numberPlate }}</span>
            </div>
            <div class="third-champion">
              <span>
                {{ xslcphb.list[2]?.kilometre }} <span>kw</span>
              </span>
              <span>{{ xslcphb.list[2]?.numberPlate }}</span>
            </div>
          </div>
          <ul class="xsphb-list">
            <li class="xsphb-list-title">
              <span>排行</span>
              <span>光伏板编号</span>
              <span>负责人</span>
              <span>发电量</span>
            </li>
            <div class="list-scroll" v-if="xslcphb.list && xslcphb.list.length > 3">
              <li v-for="(v, i) in xslcphb.list.slice(3)" :key="i">
                <span>{{ 4 + i }}</span>
                <span>{{ v.numberPlate }}</span>
                <span>{{ v.driverName }}</span>
                <span style="color:#3388FF">
                  {{ v.kilometre }} <span style="font-size: 12px;color: #2D4B73;margin-left: 4px;">kw</span>
                </span>
              </li>
            </div>
            <div class="list-scroll no-data" v-else>暂无数据</div>
          </ul>
        </div>
      </li>
      <!-- 统计概览 -->
      <li v-loading="loading.tjgl">
        <div class="dom-title">
          <img src="@/assets/img/index/tjgl.png" />
          统计概览
        </div>
        <div class="dom-body"
          style="display: flex; flex-direction: column;align-items: center; justify-content: space-around;">
          <div class="yhtj-back">
            <div class="tjgl-item">
              <div>
                <span>发电数</span>
                <span style="color:#FF9623">{{ tjgl.onlineCount }}</span>
              </div>
              <img src="@/assets/img/index/onlineNum.png" />
            </div>
            <div class="tjgl-item">
              <div>
                <span>入网数</span>
                <span style="color:#FF9623">{{ tjgl.totalCount }}</span>
              </div>
              <img src="@/assets/img/index/accessNum.png" />
            </div>
          </div>
          <div class="sbtj-back">
            <div class="tjgl-item">
              <div>
                <span>平均上线率</span>
                <span style="color:#3388ff">{{ tjgl.agvOnlineRate }}</span>
              </div>
              <img src="@/assets/img/index/averagePercent.png" />
            </div>
            <div class="tjgl-item">
              <div>
                <span>当前发电率</span>
                <span style="color:#3388ff">{{ tjgl.nowOnlineRate }}</span>
              </div>
              <img src="@/assets/img/index/currentPercent.png" />
            </div>
          </div>
        </div>
      </li>
      <!-- 最近报警信息 -->
      <li v-loading="loading.zjbj">
        <div class="dom-title">
          <img src="@/assets/img/index/zjbjxx.png" />
          最近报警信息
          <span style="font-size: 14px;color:#2D4B7380;margin-left: auto;">今日报警累计:&nbsp{{ bjtj.total }}次</span>
        </div>
        <div class="dom-body">
          <div class="zjbj-item" v-for="v in bjtj.list">
            <div class="zjbj-item-body">
              <span>{{ v.numberPlate }}</span>
              <span>
                <span>报警时间：</span>
                <span style="color:#2D4B73">{{ v.time }}</span>
              </span>
              <div class="label-dom">
                {{ v.alarmTypeName ?? '未知类型报警' }}
              </div>
            </div>
          </div>
          <div v-if="bjtj.list.length === 0" class="nodata-dom">
            <img src="@/assets/img/index/nodata.png" />
            <span class="nodata-text">太好了，没有出现报警~！</span>
          </div>
        </div>
      </li>
    </ul>
    <ul class="botm-dom">
      <!-- 拍摄照片 -->
      <li v-loading="loading.pszp">
        <div class="dom-title">
          <img src="@/assets/img/index/pszp.png" />
          拍摄照片
        </div>
        <div class="dom-body" style="color:#223355;display: flex;">
          <div class="pszp-left">
            <div class="video-dom">
              <img src="@/assets/img/index/video.png" />
              <div>
                <span>接入摄像头</span>
                <span style="margin-top: 10px;">
                  <span style="font-size:28px;color:#3388FF">{{ pszp.videoCount }}</span>
                  <span style="font-size:13px;color:#6B7A99;margin-left: 5px;">个</span>
                </span>
              </div>
            </div>
            <div class="photo-dom">
              <img src="@/assets/img/index/photo.png" />
              <div>
                <span>拍摄照片</span>
                <span style="margin-top: 10px;">
                  <span style="font-size:28px;color:#11C79B">{{ pszp.photoCount }}</span>
                  <span style="font-size:13px;color:#6B7A99;margin-left: 5px;">张</span>
                </span>
              </div>
            </div>
          </div>
          <ul class="pszp-right">
            <li v-for="v in pszp.photos">
              <img :src="getImgSrc(v.pictureUrl)" />
            </li>
          </ul>
          <div v-if="pszp.photos.length === 0" class="nodata-dom">
            <img src="@/assets/img/index/nodata.png" />
            <span class="nodata-text">暂无照片</span>
          </div>
        </div>
      </li>
      <!-- 设备状态 -->
      <li v-loading="loading.sbzt">
        <div class="dom-title">
          <img src="@/assets/img/index/sbzt.png" />
          设备状态
        </div>
        <div class="dom-body">
          <BarChart echartsClass="normalBar" :echartsData="sbzt"></BarChart>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup name="Index">
import BarChart from "@/components/Echart/BarChart"
import request from '@/utils/request'
import dayjs from "dayjs"
const query = ref({
  startTime: dayjs(new Date()).add(-6, 'days').format("YYYY-MM-DD 00:00:00"),
  endTime: dayjs(new Date()).format("YYYY-MM-DD 23:59:59")
});
// 只有第一次loading
const loading = ref({
  xslc: true,
  tjgl: true,
  sbzt: true,
  zjbj: true,
  pszp: true,
})
// 行驶里程排行
const xslcphb = ref({
  totalMileage: '',
  list: [],
});
// 统计概览
const tjgl = ref({
  agvOnlineRate: '',
  nowOnlineRate: '',
  onlineCount: '',
  totalCount: '',
});
// 设备状态
const sbzt = ref([]);
// 报警统计
const bjtj = ref({
  total: 0,
  list: [],
});
// 拍摄照片
const pszp = ref({
  photos: [],
});
function initData() {
  // 行驶里程排行
  request({
    url: "/comlbs/home/deviceMileageRank",
    method: 'post',
    data: {
      "companyId": null,
      "startTime": query.value.startTime,
      "endTime": query.value.endTime,
    }
  }).then(res => {
    loading.value.xslc = false;
    xslcphb.value = res.data;
  })
  // 统计概览\设备状态
  request({
    url: "/comlbs/home/deviceStatistics",
    method: 'post',
    data: {
      "companyId": null,
      "startTime": query.value.startTime,
      "endTime": query.value.endTime,
    }
  }).then(res => {
    loading.value.tjgl = false;
    loading.value.sbzt = false;
    tjgl.value.agvOnlineRate = res.data.agvOnlineRate + '%'
    tjgl.value.nowOnlineRate = res.data.nowOnlineRate + '%'
    tjgl.value.onlineCount = res.data.onlineCount
    tjgl.value.totalCount = res.data.totalCount
    sbzt.value = [
      { name: "发电", value: res.data.deviceStatus.drivingCount },
      //{ name: "停留", value: res.data.deviceStatus.stopCount },
      //{ name: "熄火", value: res.data.deviceStatus.flameOutCount },
      { name: "未发电", value: res.data.deviceStatus.offlineCount },
      { name: "定位失败", value: res.data.deviceStatus.positioningFailCount },
    ];
  })
  // 报警统计
  request({
    url: "/comlbs/home/alarmStatistics",
    method: 'post',
    data: {
      startTime: dayjs(new Date()).format("YYYY-MM-DD 00:00:00"),
      endTime: dayjs(new Date()).format("YYYY-MM-DD 23:59:59")
    }
  }).then(res => {
    loading.value.zjbj = false;
    bjtj.value = res.data
  }).catch(() => {
    loading.value.zjbj = false;
  })
  // 拍摄照片
  request({
    url: "/comlbs/home/photoStatistics",
    method: 'post',
    data: {
      "companyId": null,
      "startTime": query.value.startTime,
      "endTime": query.value.endTime,
      "pageNum": 1,
      "pageSize": 9,
    }
  }).then(res => {
    loading.value.pszp = false;
    pszp.value = {
      videoCount: res.data.cameraCount,
      photoCount: res.data.pageInfo.total,
      photos: res.data.pageInfo.list,
    }
  })
}
function getImgSrc(val) {
  if (val) {
    //@ts-ignore
    return import.meta.env.VITE_APP_BASE_API + val;
  }
  else return "";
}
initData();
setInterval(() => {
  initData();
}, GlobalSetting.IotConfig.interval)
</script>
<style scoped lang="scss">
.home {
  margin: 0;
  padding: 20px 24px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;

  .top-dom {
    width: 100%;
    height: 58%;
    margin-bottom: 1.5%;
    min-width: 1652px;
    min-height: 456px;
    margin-bottom: 0.8%;

    >li {
      width: 32.8%;
    }
  }

  .botm-dom {
    width: 100%;
    height: 40.5%;
    min-width: 1652px;
    min-height: 318px;

    >li {
      width: 49.5%;
    }
  }

  >ul {
    display: flex;
    justify-content: space-between;

    >li {
      border-radius: 8px;
      box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1), 0 0 3px 0 rgba(0, 0, 0, 0.04);
      height: 100%;
      background-color: #fff;

      .dom-title {
        font-size: 20px;
        color: #2D4B73;
        font-weight: 600;
        height: 60px;
        display: flex;
        align-items: center;
        padding: 0 20px;

        >img {
          margin-right: 10px;
        }
      }

      .dom-body {
        width: 100%;
        height: calc(100% - 60px);
        padding: 10px 20px;
        padding-top: 0;
        box-sizing: border-box;
        overflow-y: auto;
      }
    }
  }

  .pszp-left {
    width: 222px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-right: 20px;

    >div {
      display: flex;
      align-items: center;

      >div {
        display: flex;
        flex-direction: column;
      }

      >img {
        width: 48px;
        height: 48px;
        margin: 0 20px;
      }
    }

    .video-dom {
      background: url('../assets/img/index/video_back.png') no-repeat center;
      width: 222px;
      height: 110px;
      margin-bottom: 20px;
    }

    .photo-dom {
      background: url('../assets/img/index/photo_back.png') no-repeat center;
      width: 222px;
      height: 110px;
    }

  }

  .pszp-right {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;

    li {
      width: 31%;
      height: 110px;
      margin-bottom: 20px;
      margin-right: 2%;

      &:last-of-type {
        margin-right: 0;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .nodata-dom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-direction: column;

    .nodata-text {
      color: #6B7A99;
      font-size: 14px;
    }
  }

  .zjbj-item {
    background-color: #FF7A58;
    padding-left: 4px;
    height: 68px;
    width: 100%;
    border-radius: 4px 0 8px 8px;
    box-shadow: 0px 8px 16px 0px #2D4B7314;
    margin-bottom: 15px;

    .zjbj-item-body {
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 4px 0 8px 8px;
      position: relative;
      display: flex;
      flex-direction: column;
      color: #223355;
      justify-content: space-evenly;
      padding: 0 15px;

      .label-dom {
        position: absolute;
        right: 0;
        top: 0;
        height: 26px;
        font-size: 14px;
        color: #FF5023;
        background-color: #FF502310;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 0 0 16px;
        padding: 0 15px;
        font-weight: 600;
      }

      >span:nth-of-type(1) {
        font-size: 18px;
        font-weight: 600;
      }

      >span:nth-of-type(2) {
        font-size: 14px;
        color: #2D4B7360;
      }
    }
  }

  .yhtj-back {
    background: url('../assets/img/index/yhtj.png') no-repeat center;
    width: 492px;
    height: 180px;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    padding-bottom: 20px;
  }

  .sbtj-back {
    background: url('../assets/img/index/sbtj.png') no-repeat center;
    width: 492px;
    height: 180px;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    padding-bottom: 20px;
  }

  .tjgl-item {
    width: 220px;
    height: 100px;
    background-color: #FFFFFF;
    border-radius: 8px;
    color: #2D4B7380;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 10px;
    box-sizing: border-box;

    img {
      width: 48px;
      height: 48px;
    }

    >div {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      >span:nth-of-type(1) {
        color: #2D4B7380;
        font-size: 14px;
        margin-bottom: 10px;
      }

      >span:nth-of-type(2) {
        font-size: 32px;
        font-weight: 600;
      }
    }
  }

  .champion-dom {
    height: 150px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    margin-bottom: 4px;

    >div {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;

      >span {
        text-align: center;
      }

      >span:nth-of-type(1) {
        font-size: 26px;
        color: #223355;
        margin-bottom: 5px;
        font-style: italic;

        >span {
          font-style: initial;
          font-size: 13px;
          color: #2D4B73;
        }
      }

      >span:nth-of-type(2) {
        font-size: 15px;
        color: #8193A5;
        margin-bottom: 20px;
      }
    }

    .first-champion {
      background: url('../assets/img/index/first.png') no-repeat center;
      width: 133px;
      height: 148px;
    }

    .second-champion {
      background: url('../assets/img/index/second.png') no-repeat center;
      width: 133px;
      height: 135px;
    }

    .third-champion {
      background: url('../assets/img/index/third.png') no-repeat center;
      width: 133px;
      height: 135px;
    }
  }

  .xsphb-list {
    height: calc(100% - 154px);
    width: 100%;

    .xsphb-list-title {
      height: 32px;
      padding-bottom: 2px;
      background-color: #FAFBFF;
      border-top: 1px solid #eee;
      color: #6B7A99;
      font-size: 14px;
    }

    .no-data {
      color: #223355;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .list-scroll {
      height: calc(100% - 32px);
      width: 100%;
      overflow-y: auto;
    }

    li {
      width: 100%;
      height: 40px;
      color: #223355;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      box-sizing: border-box;

      >span {
        display: inline-block;
        display: flex;
        align-items: center;
        padding-left: 4px;
      }

      >span:nth-of-type(1) {
        width: 75px;
      }

      >span:nth-of-type(2) {
        width: 175px;
      }

      >span:nth-of-type(3) {
        width: 150px;
      }

      >span:nth-of-type(4) {
        flex: 1;
      }
    }
  }
}
</style>

